<template>
  <!-- 二期 首页 -->
  <view id="warp">
    <c-navBar
      class="navBar"
      title="喜牛庭肉铺"
      :isTran="TRUE"
      isPerch
      isBack
    ></c-navBar>
    <!-- <view :style="{ top: `${navHeight}px` }" class="search" @click="goSearch">
      <u-search placeholder="搜索商品" disabled v-model="keyword"></u-search>
    </view> -->

    <view class="seBg">
      <u-swiper
        :list="banner"
        indicatorMode="dot"
        keyName="imgs"
        name="imgs"
        height="400rpx"
        @click="toSwiper"
        circular
      ></u-swiper>
    </view>

    <view class="navs" :style="{ '--hei': hei }">
      <view
        class="nav-item"
        v-for="(v, i) in homeIcon"
        :key="i"
        @click="skipNav(v)"
      >
        <view style="width: 100rpx; height: 100rpx; overflow: hidden">
          <image style="width: 100%" :src="v.picture" mode="widthFix"></image>
        </view>
        <view class="" style="margin-top: 3rpx;">
          {{ v.title }}
        </view>
      </view>
    </view>
    <view class="angle" v-if="goodsList.length > 0">
      <view class="df jcsb" >
        <image
          class="angle-icon"
          style="margin-top: 0rpx; width: 210rpx; height: 60rpx"
          src="/static/tabbar/angle.png"
        ></image>
        <view class="c_more" @click="jumpAngle(1)">
          <view>更多</view>
          <image src="/static/common/go.png" mode=""></image>
        </view>
      </view>
      <!-- <scroll-view scroll-x="true">
        <view class="an-box">
          <view
            class="shop"
            v-for="(v, i) in goodsList"
            :key="i"
            @click="jumpGoodDetails(v.id)"
          >
            <view class="sh-img">
              <image :src="v.cover" mode=""></image>
            </view>
            <view class="sh-title otw">{{ v.title }}</view>
            <view class="df aife" v-show="type !== 0">
              <view class="sh-price"><text>￥</text>{{ v.price }}</view>
            </view>
            <view class="df aife" v-show="type == 0">
              <view class="sh-price"><text>￥</text>{{ v.memberPrice }}</view>
              <view class="sh-old">￥{{ v.price }}</view>
            </view>
          </view>
        </view>
      </scroll-view> -->
      <u-scroll-list
        :indicator="false"
        indicatorColor="#fff0f0"
        indicatorActiveColor="#f56c6c"
      >
        <view
          class="shop"
          :style="{'margin-top': '10rpx','margin-left':i==0?'16rpx':'0'}"
          v-for="(v, i) in goodsList"
          :key="i"
          @click="jumpGoodDetails(v.id)"
        >
          <view class="sh-img">
            <image :src="v.cover" mode=""></image>
          </view>
          <view class="sh-title otw" style="margin-top: 20rpx">{{
            v.title
          }}</view>
          <!-- <view class="df aife" v-show="type == 0">
            <view class="sh-price"><text>￥</text>{{ v.price }}</view>
          </view>
          <view class="df aife" v-show="type !== 0">
            <view class="sh-price"><text>￥</text>{{ v.memberPrice }}</view>
            <view class="sh-old">￥{{ v.price }}</view>
          </view> -->
		  <view class="df aife">
		    <view class="sh-price"><text>￥</text>{{ v.memberPrice }}</view>
		    <view class="sh-old">￥{{ v.price }}</view>
		  </view>
        </view>
      </u-scroll-list>
    </view>

    <view class="new" v-if="notelist.length > 0">
      <view class="df aic jcsb mb20">
        <view class="manor-style">笔记内容</view>
        <view class="c_more" @click="toNote(1)">
          <view>更多</view>
          <image src="/static/common/go.png" mode=""></image>
        </view>
      </view>
      <view class="ne-box">
        <view
          class="ne-shop"
          v-for="(item, index) in notelist"
          :key="index"
          @click="toNoteDetails(item)"
        >
          <view class="sh-img">
            <image
              style="width: 200rpx"
              :src="item.cover"
              mode="widthFix"
            ></image>
          </view>

          <view class="shop-right">
            <p class="shop-right1 fwb mb10 cont2 bs">
              {{ item.title }}
            </p>
            <p
              class="shop-right2 bs"
              style="
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
              "
            >
              {{ item.main ? item.main : "" }}
              <!-- <u-parse :content="item.remark"></u-parse> -->
            </p>
            <!-- <view class="shop-right3" v-if="type == 0">
              <p class="shop-right4">￥{{ item.price }}</p>
              <p class="shop-right5">销量{{ item.sellCount }}</p>
            </view>
            <view class="shop-right3" v-if="type != 0">
              <p class="shop-right4">
                ￥{{ item.memberPrice }}
                <text style="text-decoration: line-through; margin-left: 8rpx"
                  >￥{{ item.price }}</text
                >
              </p>
              <p class="shop-right5">销量{{ item.sellCount }}</p>
            </view> -->
          </view>
        </view>
        <!-- <u-loadmore :status="loadStatus" :loadingText="loadingText" /> -->
      </view>
    </view>
    <!-- 领券弹框 -->
    <u-overlay :show="bulletBox" @click="bulletBox = false">
      <view class="">
        <view class="get-box" v-if="bulletBox">
          <image class="getImg" src="@/static/tabbar/get-quan1.png" mode="">
          </image>
        </view>
        <view class="get-concent">
          <view class="get-font"> 新人专享好礼 </view>
          <view class="get-button">
            <image
              class="button-img"
              src="@/static/tabbar/get-quan2.png"
              mode=""
            ></image>
            <view class="coupon-font">
              <p class="coupon-font1">新人券</p>
              <p class="coupon-font2" v-if="newCoupon.type == 1">
                满{{ newCoupon.meetAmount }}减{{ newCoupon.deduction }}新人专享
              </p>
              <p class="coupon-font2" v-if="newCoupon.type == 2">
                打{{ newCoupon.discounts }}折新人专享
              </p>
              <p class="coupon-font2" v-if="newCoupon.type == 3">
                抵扣{{ newCoupon.deduction }}新人专享
              </p>
            </view>
            <button class="button-item" @click="goNewCoupon">领取</button>
          </view>

          <view class="get-sure" @tap="bulletBox = false"> 确定 </view>
        </view>
      </view>
    </u-overlay>
    <!-- 认养茶园 -->
    <!-- <view class="teaGarden" @click="goBuy">
      <image
        style="width: 104rpx; height: 128rpx"
        src="../../static/tabbar/fixd-icon.png"
        mode=""
      ></image>
    </view> -->
    <view style="width: 100%; height: 28rpx"> </view>
  </view>
</template>

<script>
import { init_frontendNoteList } from "@/api/node.js";
export default {
  data() {
    return {
      type: 0,
      loadStatus: "loading",
      loadingText: "加载中...",
      apiParams: {
        //这是接口参数
        categoryId: 1,
      },
      api: this.$api.allProductsList,
      bulletBox: false, //领券弹出框
      productsList: [], //庄园风采
      manor: {},
      goodsList: [], //热销产品
      notelist: [],
      hei: "60rpx",
      banner: [], //背景
      homeIcon: [],
      newCoupon: {}, //新人优惠券
      user: {},
      pageNum: 1,
      total: 10,
      scrollTop: 0,
      newCoupon: "",
      navHeight: null,
    };
  },

  onReady() {
    setTimeout(() => {
      let query = wx.createSelectorQuery();
      query
        .select(".navBar")
        .boundingClientRect((rect) => {
          let height = rect.height;
          this.navHeight = height;
        })
        .exec();
    }, 300);
  },
  onLoad(e) {
    this.getHomeIconList();
    this.getGoodsList();
    this.getNoteList();
    this.newCoupon = e.newCoupon;
	this.shareFun(e)
  },
  onShow(options) {
    this.getHomeBanner();

    let lifeData = uni.getStorageSync("lifeData");
    if (lifeData) {
      this.getCartNum();
      this.getUserType();
      this.getNewPeople();
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom() {
    if (this.manor.total > this.productsList.length) {
      this.pageNum++;
      this.getAllProductsList();
    } else {
      this.loadStatus = "";
      this.loadingText = "";
    }
  },
  methods: {
	  //分享功能
	  shareFun(options) {
	  	  if (options && options.q) {			
	            let url = decodeURIComponent(options.q)
	            let query = this.GetWxMiniProgramUrlParam(url);
	            let userId = query.userId;
				console.log("sharerId: ", userId)
				wx.setStorageSync("sharerId", userId)
	        }
	  },
	  GetWxMiniProgramUrlParam(url) {
	        let theRequest = {};
	        if (url.indexOf("#") != -1) {
	            const str = url.split("#")[1];
	            const strs = str.split("&");
	            for (let i = 0; i < strs.length; i++) {
	                theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
	            }
	        } else if (url.indexOf("?") != -1) {
	            const str = url.split("?")[1];
	            const strs = str.split("&");
	            for (let i = 0; i < strs.length; i++) {
	                theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
	            }
	        }
	        return theRequest;
	  },
    // 获取会员等级
    getUserType() {
      this.$api.getUserTypeY({}).then((res) => {
        // this.type = res.data;
        this.type = 1;
        this.$forceUpdate();
      });
    },
    async getNoteList() {
      const res = await init_frontendNoteList();
      res?.forEach((e) => {
        if (e?.remark) {
          e.main = e?.remark
            .split("<p>")[1]
            .substring(0, e?.remark.split("<p>")[1]?.length - 4);
        }
      });
      this.notelist = res;
      console.log("res-xxj :>> ", this.notelist);
    },
    toNote() {
      uni.reLaunch({
        url: `/pages/tabbar/note`,
      });
    },
    toNoteDetails(v) {
      uni.navigateTo({
        url: `/pages/note/noteDetails?noteId=${v?.id}`,
      });
    },
    // 获取购物车数据
    getCartNum() {
      this.$api.getCartNumY().then((res) => {
        if (res.data > 0) {
          uni.setTabBarBadge({
            index: 3,
            text: String(res.data),
          });
        } else {
          uni.removeTabBarBadge({
            index: 3,
          });
        }
      });
    },
    getAllProductsList() {
      // categoryId：（1：热销\2：限时限量）
      let params = {
        categoryId: "1",
        // sotSales: 1,
        // userId: uni.getStorageSync("user").userId,
        pageNum: this.pageNum,
        pageSize: 10,
      };

      this.$api.allProductsList(params).then((res) => {
        this.manor = res.data;
        this.productsList = [...this.productsList, ...res.data.list];
        console.log("this.productsList :>> ", this.productsList);
      });
    },

    // 去搜索
    goSearch() {
      uni.navigateTo({
        url: "/pages/goods/pages/scarch",
      });
    },

    // 判断是否领券新人券
    getNewPeople() {
      if (this.newCoupon == 0) {
        this.bulletBox = true;
      } else {
        this.bulletBox = false;
      }
      // 新人优惠券
      this.$api.couponNewPeople({}).then((res) => {
        this.newCoupon = res.data;
      });
    },
    // 领取优惠券
    goNewCoupon() {
      this.$api
        .receiveCoupon({
          id: this.newCoupon.id,
        })
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: "领券成功",
              icon: "success",
              duration: 1000,
            });
          }
        });
    },
    // 认养茶园
    goBuy() {
      uni.navigateTo({
        url: "/pages/my/pages/ownerBuy",
      });
    },
    getGoodsList() {
      let params = {
        categoryId: "1",
        // sotLimit: 1,
        // userId: uni.getStorageSync("user").userId,
      };

      this.$api.allProductsList(params).then((res) => {
        this.goodsList = res.data.list;
      });
    },
    // 庄园风采
    load(res) {
      this.productsList = res.list;
    },
    // 轮播图
    getHomeBanner() {
      this.$api.homeBanner({}).then((res) => {
        this.banner = res.data.list;
      });
    },
    // 跳转到商品详情
    jumpGoodDetails(id) {
      uni.navigateTo({
        url: "/pages/goods/pages/goodsDetails?id=" + id,
      });
    },
    // 获取首页图标
    getHomeIconList() {
      this.$api
        .waresTypeMenu({
          type: 1,
        })
        .then((res) => {
          let iconList = [
            {
              picture: "../../static/tabbar/home-op9.png",
              title: "领券中心",
              url: "/pages/example/pages/coupon",
            },
            {
              picture: "../../static/tabbar/home-op8.png",
              title: "我的收藏",
              url: "/pages/note/collect",
            },
          ];
          this.homeIcon = [...res.data, ...iconList];
        });
    },

    // 跳转到热销商品
    jumpAngle(id) {
      uni.reLaunch({
        url: "/pages/tabbar/shop?id=" + id,
      });
    },
    // 导航跳转
    skipNav(item) {
      if (!item.id) {
        uni.navigateTo({
          url: item.url,
        });
      } else {
        uni.reLaunch({
          url: `/pages/tabbar/shop?id=${item.id}`,
        });
      }
    },

    toSwiper(i) {
      uni.navigateTo({
        url: `/pages/goods/pages/goodsDetails?id=${this.banner[i].goodsId}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-search__action {
  display: none;
}
/deep/ .u-parse {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: 110rpx;
}

page {
  background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.coupon-font {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 10rpx;
  left: 35rpx;

  .coupon-font1 {
    font-size: 48rpx;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    color: #ea4a26;
  }

  .coupon-font2 {
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ea4a26;
  }
}

#warp {
  width: 100vw;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.teaGarden {
  width: 104rpx;
  height: 128rpx;
  position: fixed;
  bottom: 218rpx;
  right: 0rpx;
  z-index: 999;
}

// 优惠券
.get-box {
  display: flex;
  justify-content: center;
  margin-top: calc((100vh - 500rpx) / 2);

  .getImg {
    width: 480rpx;
    height: 500rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}

.get-concent {
  width: 420rpx;
  height: 400rpx;
  margin-top: -450rpx;
  margin-left: calc((100% - 420rpx) / 2);

  .get-font {
    height: 40rpx;
    font-size: 44rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
  }

  .get-button {
    width: 420rpx;
    height: 120rpx;
    margin-top: 54rpx;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    position: relative;

    .button-img {
      width: 420rpx;
      height: 120rpx;
    }

    .button-item {
      width: 100rpx;
      height: 56rpx;
      background: #f35437;
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      color: #ffffff;
      text-align: center;
      line-height: 56rpx;
      padding: 0;
      margin: 0;
      position: absolute;
      top: 32rpx;
      left: 293rpx;
    }
  }

  .get-sure {
    width: 400rpx;
    height: 88rpx;
    margin: 0 auto;
    margin-top: 120rpx;
    background: linear-gradient(180deg, #fcf37b 0%, #f8d848 100%);
    box-shadow: inset 0rpx 22rpx 16rpx 0rpx rgba(255, 255, 255, 0.4),
      0rpx 6rpx 8rpx 0rpx rgba(174, 0, 0, 0.25),
      inset 0rpx -12rpx 16rpx 0rpx rgba(255, 255, 255, 0.4);
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    font-size: 36rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    color: #e53d17;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 111;
    left: calc((100% - 400rpx) / 2);
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 412rpx;
  padding-left: 30rpx;

  .na-address {
    display: flex;
    align-items: center;

    .na-img {
      width: 28rpx;
      height: 28rpx;
      margin-right: 8rpx;
    }

    .na-name {
      font-size: 28rpx;
      font-weight: bold;
      color: #1a1a1a;
    }

    .na-title {
      color: #1a1a1a;
      font-size: 32rpx;
    }
  }
}

.seBg {
  width: 750rpx;
  height: 400rpx;
}

.search {
  background-color: #fff;
  padding: 10rpx 30rpx;
  height: 72rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 40rpx;
}

.navs {
  padding: 30rpx 0rpx 0;
  display: flex;
  flex-wrap: wrap;
  margin: 30rpx 20rpx 0;
  background: #fff;
  border-radius: 16rpx;

  .nav-item {
    color: #444d63;
    font-size: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32rpx;
    width: 25%;

    image {
      margin-bottom: 10rpx;
      border-radius: 20rpx;
    }
  }
}

.shop {
  width: 212rpx;
  border-radius: 12rpx;
  position: relative;

  .sh-img {
    width: 100%;
    height: 212rpx;
    border-radius: 12rpx;
    overflow: hidden;
    position: relative;
    vertical-align: middle;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .sh-title {
    width: 200rpx;
    font-size: 28rpx;
    color: #343840;
  }

  .sh-price {
    font-size: 36rpx;
    font-weight: bold;
    color: #ee3b31;

    text {
      font-size: 20rpx;
    }
  }

  .sh-old {
    font-size: 20rpx;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;
    text-decoration: line-through;
    margin-left: 6rpx;
  }
}

.angle {
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  background: linear-gradient(
    180deg,
    #ffe0e0 0%,
    rgba(255, 255, 255, 0) 25%,
    #ffffff 100%
  );

  .c_more {
    margin: 20rpx 22rpx 0 0;
  }

  .angle-icon {
    width: 230rpx;
    height: 80rpx;
  }

  .an-box {
    padding: 0rpx 16rpx 0;
    white-space: nowrap;
    width: 100%;
  }
  .shop {
    width: 240rpx;
    display: inline-block;
    margin-right: 17rpx;
  }
}

.mb20 {
  margin-bottom: 20rpx;

  .manor-style {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 800;
    color: #367fc4;
  }
}

.new {
  padding: 24rpx 16rpx;
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;

  .ne-box {
    .ne-shop {
      display: flex;
      justify-content: space-between;

      .sh-img {
        height: 200rpx;
        width: 200rpx;
        border-radius: 8rpx;
        margin-bottom: 20rpx;
        box-sizing: border-box;
        overflow: hidden;
      }

      .shop-right {
        width: 442rpx;
        padding: 24rpx 0rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #e6e6e6;

        .shop-right1 {
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .shop-right2 {
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #999999;
          box-sizing: border-box;
        }

        .shop-right3 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 50rpx;
          box-sizing: border-box;

          .shop-right4 {
            font-size: 36rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            color: #ee3b31;

            text {
              font-size: 20rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }

          .shop-right5 {
            font-size: 20rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }
  }
}

/deep/ ::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	color: transparent;
}

</style>
